<template>
  <!-- 菜单管理页面组件 -->
  <div class="RootBox">
    <div class="tabbleList">
      <!-- 表单结构图 -->
      <div class="fatherform">
        <el-table
          :data="treeListData"
          stripe
          row-key="id"
          :indent="20"
          size="mini"
          :header-cell-style="{ background: '#eff3f8', color: '#606266' }"
          :expand-row-keys="defualtNodeList"
          :tree-props="{ children: 'children' }"
        >
          <el-table-column prop="name" label="名称" min-width="150">
            <template slot-scope="scope">
              <i :class="'iconfont' + ' ' + scope.row.icon" style="font-size: 12px"></i>
              {{ scope.row.name }}
            </template>
          </el-table-column>
          <el-table-column prop="code" label="编码"></el-table-column>
          <el-table-column label="类型">
            <template slot-scope="scope">
              <el-tag class="lookUser" v-if="scope.row.children">目录</el-tag>
              <el-tag class="updateUser" v-else>菜单</el-tag>
              <!-- {{scope.row.children}} -->
            </template>
          </el-table-column>
          <el-table-column prop="routeUrl" label="路由地址"></el-table-column>
          <el-table-column prop="sort" label="序号" width="60"></el-table-column>
          <el-table-column label="操作" width="400">
            <template slot-scope="scope">
              <el-button size="mini" class="addUser" @click="addFormtype(scope.row)">新增</el-button>
              <el-button size="mini" class="updateUser" @click="updatehandren(scope.row)">编辑</el-button>
              <el-button size="mini" type="danger" v-if="scope.row.hierarchy !== '/'" @click="deleteMenu(scope.row)">
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <!-- 弹出层1 -->
    <div>
      <el-dialog
        title="新建菜单"
        width="800px"
        :close-on-click-modal="false"
        :visible.sync="dialogFormVisible"
        @open="addmenOpenHandler"
      >
        <div>
          <el-form :model="sysMenu" ref="sysMenu" :rules="rules">
            <el-form-item label="名称" prop="name" :label-width="formLabelWidth">
              <span class="elinputlist">
                <el-input v-model.trim="sysMenu.name" autocomplete="off"></el-input>
              </span>
            </el-form-item>

            <el-form-item label="菜单编码" prop="code" :label-width="formLabelWidth">
              <span class="elinputlist">
                <el-input v-model.trim="sysMenu.code" autocomplete="off"></el-input>
              </span>
            </el-form-item>
            <el-form-item label="图标" :label-width="formLabelWidth">
              <el-select v-model="sysMenu.icon" placeholder="请选择类型" @change="changeSelection" ref="select">
                <el-option v-for="item in optioniconlist" :key="item.value" :label="item.name" :value="item.icon">
                  <div>
                    <i :class="'iconfont' + ' ' + item.icon"></i>
                    <span style="margin-left: 40px">{{ item.name }}</span>
                  </div>
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item prop="sort" label="序号" :label-width="formLabelWidth">
              <span class="elinputlist">
                <el-input-number v-model="sysMenu.sort" :min="0" :step="10"></el-input-number>
              </span>
            </el-form-item>
            <el-form-item label="别名" prop="comments" :label-width="formLabelWidth">
              <span class="elinputlist">
                <el-input v-model="sysMenu.comments" autocomplete="off"></el-input>
              </span>
            </el-form-item>
            <el-form-item label="是否显示" :label-width="formLabelWidth">
              <span class="elinputlist">
                <el-select v-model="sysMenu.isShow" placeholder="请选择类型" @change="changeSelection">
                  <el-option
                    v-for="item in isShowData"
                    :key="item.isShow"
                    :label="item.name"
                    :value="item.isShow"
                  ></el-option>
                </el-select>
              </span>
            </el-form-item>
            <el-form-item label="菜单类型" :label-width="formLabelWidth">
              <span class="elinputlist">
                <el-select v-model="sysMenu.sysType" placeholder="请选择类型" @change="changeSelection">
                  <el-option
                    v-for="item in Mentype"
                    :key="item.sysType"
                    :label="item.name"
                    :value="item.sysType"
                  ></el-option>
                </el-select>
              </span>
            </el-form-item>
            <el-form-item label="路由URL" class="routeUrl" prop="routeUrl" :label-width="formLabelWidth">
              <span class="elinputlist">
                <el-input v-model.trim="sysMenu.routeUrl" autocomplete="off"></el-input>
              </span>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="SubmitAddMenu('sysMenu')">确 定</el-button>
            <el-button @click="cleardialog('sysMenu')">取 消</el-button>
          </div>
        </div>
      </el-dialog>
    </div>
    <!-- 编辑弹框2 -->
    <div>
      <el-dialog
        v-if="rightclickdata"
        :close-on-click-modal="false"
        title="编辑菜单"
        :visible.sync="updatedialogFormVisible"
        width="800px"
      >
        <div>
          <el-form :model="rightclickdata" ref="rightclickdata" :rules="rules">
            <el-form-item label="名称" prop="name" :label-width="formLabelWidth">
              <span class="elinputlist">
                <el-input v-model.trim="rightclickdata.name" autocomplete="off"></el-input>
              </span>
            </el-form-item>
            <el-form-item label="菜单编码" prop="code" :label-width="formLabelWidth">
              <span class="elinputlist">
                <el-input v-model.trim="rightclickdata.code" autocomplete="off"></el-input>
              </span>
            </el-form-item>
            <el-form-item label="图标" :label-width="formLabelWidth">
              <el-select v-model="rightclickdata.icon" placeholder="请选择类型" @change="changeSelection" ref="select">
                <el-option v-for="item in optioniconlist" :key="item.value" :label="item.name" :value="item.icon">
                  <div>
                    <i :class="'iconfont' + ' ' + item.icon"></i>
                    <span style="margin-left: 40px">{{ item.name }}</span>
                  </div>
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="iconfont" prop="sort" :label-width="formLabelWidth">
              <span class="elinputlist">
                <el-input v-model.trim="rightclickdata.icon" placeholder="图标的 iconfont 名" clearable></el-input>
              </span>
            </el-form-item>
            <el-form-item label="序号" prop="sort" :label-width="formLabelWidth">
              <span class="elinputlist">
                <el-input-number v-model="rightclickdata.sort" :min="0" :step="10"></el-input-number>
              </span>
            </el-form-item>
            <el-form-item label="别名" prop="comments" :label-width="formLabelWidth">
              <span class="elinputlist">
                <el-input v-model.trim="rightclickdata.comments" autocomplete="off"></el-input>
              </span>
            </el-form-item>
            <el-form-item label="是否显示" :label-width="formLabelWidth">
              <span class="elinputlist">
                <el-select v-model="rightclickdata.isShow" placeholder="请选择类型" @change="changeSelection">
                  <el-option
                    v-for="item in isShowData"
                    :key="item.isShow"
                    :label="item.name"
                    :value="item.isShow"
                  ></el-option>
                </el-select>
              </span>
            </el-form-item>
            <el-form-item label="菜单类型" :label-width="formLabelWidth">
              <span class="elinputlist">
                <el-select v-model="rightclickdata.sysType" placeholder="请选择类型" @change="changeSelection">
                  <el-option
                    v-for="item in Mentype"
                    :key="item.sysType"
                    :label="item.name"
                    :value="item.sysType"
                  ></el-option>
                </el-select>
              </span>
            </el-form-item>
            <el-form-item label="路由URL" class="routeUrl" prop="routeUrl" :label-width="formLabelWidth">
              <span class="elinputlist">
                <el-input v-model.trim="rightclickdata.routeUrl" autocomplete="off"></el-input>
              </span>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="SubmitUpdateMenu('rightclickdata')">确 定</el-button>
            <el-button @click="cleardialogtwo('rightclickdata')">取 消</el-button>
          </div>
        </div>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import { clearSpace } from '@/utils/tools/funtctionAPI.js'
import authorityApi from '@/utils/tools/authorityApi/index.js'
import { flatPidToTree } from '@/utils/tools/common'
import { icons } from './icons'
import { menuRules, menuButtonRules } from '@/utils/tools/RegExpression.js'
import { showTreeLayKeys } from '@/utils/tools/common'
export default {
  name: 'menu',
  data() {
    return {
      dialogWidth: '50%',
      tmDisplay: false, //右键弹出菜单
      dialogFormVisible: false, // 弹出层1显示or隐藏
      updatedialogFormVisible: false, //编辑显示or隐藏
      // 树形结构图数据
      treeListData: [],
      currentEl: '',
      defualtNodeList: [],
      // 表单数组
      tableData: [],
      sysMenu: {
        isShow: 1,
        // 表单验证数据
        name: '',
        hierarchy: '',
        code: '',
        icon: '',
        routeUrl: '',
        sort: 10,
        comments: '',
        sysType: ''
      },
      rightclickdata: {},
      Mentype: [
        // {
        //   name: '前台',
        //   sysType: 1
        // },
        {
          name: '后台',
          sysType: 0
        }
        // {
        //   name: '移动前台',
        //   sysType: 2
        // }
      ],
      isShowData: [
        {
          name: '是',
          isShow: 1
        },
        {
          name: '否',
          isShow: 0
        }
      ],

      degPageTypeName: '', //optioins选中数值
      degPageTypeId: '', //options选中id
      formLabelWidth: '122px',
      CurrentmenuId: '', //当前选择菜单id
      Currentmenu: '', //当前选择菜单对象
      // 下拉数据
      optionstype: [
        {
          type: 0,
          label: '普通菜单'
        },
        {
          type: 1,
          label: '功能菜单'
        }
      ],
      // 下拉图标数据
      optioniconlist: [],

      rightMenutwo: {},
      menuCode: '',

      tmDisplaythree: false,

      //   弹出框验证
      rules: menuRules,
      rulesbtn: menuButtonRules,

      addform: {},
      // 禁用菜单类型
      disableMenuType: false
    }
  },
  created() {
    this.getMenuTree()
    this.optioniconlist = icons
  },

  methods: {
    // 新建菜单按钮
    addFormtype(row) {
      this.degPageTypeName = row
      if (row.weight !== undefined && row.weight == 0) {
        this.disableMenuType = true
      } else {
        this.sysMenu.sysType = row.sysType
        this.disableMenuType = false
      }
      this.dialogFormVisible = true
    },
    //获取菜单树形数据
    getMenuTree() {
      authorityApi.MenuPort.getMenuTree({ loading: true }, (res) => {
        this.treeListData = flatPidToTree(res)
        this.defualtNodeList = showTreeLayKeys(this.treeListData)
      })
    },

    changeSelection(e) {
      const dom = this.$refs['select'].$el.children[0].children[1]
      dom.setAttribute('class', `el-input__suffix  iconfont ${e}`)
    },
    addmenOpenHandler() {
      this.sysMenu.hierarchy = this.degPageTypeName.hierarchy
    },
    //新增菜单管理提交
    SubmitAddMenu(addform) {
      this.$refs[addform].validate((value) => {
        if (value) {
          let data = {
            ...this.sysMenu,

            loading: true
          }
          authorityApi.MenuPort.saveAddMenu(data, (res) => {
            this.sysMenu = {}
            this.sysDynamicPage = {}
            this.getMenuTree()
            this.dialogFormVisible = false
            this.$emit('renovatemenutree')
            this.$refs[addform].clearValidate()
          })
        } else {
          return false
        }
      })
    },
    //右键编辑事件
    updatehandren(row) {
      authorityApi.MenuPort.getSysMenuByid({ id: row.id }, (res) => {
        this.menuCode = res.code
        this.rightclickdata = res
        this.rightclickdata.isDynamic = this.rightclickdata.type
        this.updatedialogFormVisible = true
        this.tmDisplay = false
      })
    },
    //编辑普通菜单提交
    SubmitUpdateMenu(addbuttonMenu) {
      this.$refs[addbuttonMenu].validate((value) => {
        if (value) {
          delete this.rightclickdata.isDynamic
          let data = { ...this.rightclickdata, loading: true }
          data = clearSpace(data)

          if (this.menuCode === data.code) {
            delete data.code
          }
          authorityApi.MenuPort.updateMenu(data, (res) => {
            this.rightclickdata = {}
            this.menuCode = ''
            this.getMenuTree()
            this.updatedialogFormVisible = false
            this.$emit('renovatemenutree')
          })
        } else {
          return false
        }
      })
    },

    deleteMenu(row) {
      this.tmDisplay = false
      this.tmDisplaythree = false
      let data = { id: row.id, loading: true }
      this.$confirm('此操作将永久删除当前菜单和所有子级菜单, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          authorityApi.MenuPort.deleteMenuByid(data, (res) => {
            this.$message.success(res)
            this.$emit('renovatemenutree')
            this.getMenuTree()
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    cleardialog(form) {
      this.$refs[form].clearValidate()
      this.dialogFormVisible = false
      const dom = this.$refs['select'].$el.children[0].children[1]
      dom.setAttribute('class', `el-input__suffix`)
      this.sysMenu = {
        isShow: 1,
        // 表单验证数据
        name: '',
        hierarchy: '',
        code: '',
        icon: '',
        routeUrl: '',
        sort: 10,
        comments: ''
      }
    },
    cleardialogtwo(form) {
      this.$refs[form].clearValidate()
      const dom = this.$refs['select'].$el.children[0].children[1]
      dom.setAttribute('class', `el-input__suffix`)
      this.updatedialogFormVisible = false
      this.rightclickdata = {}
    },

    apidialogHandler(row) {
      this.$refs.apidlog.drawer = true
      this.$refs.apidlog.menuId = row.id
    }
  },
  watch: {
    data(newdata, olddata) {
      this.$emit('newdata', newdata)
    },
    tableData(newtablelist) {
      this.tableData = newtablelist
    }
  }
}
</script>
<style lang="less" scoped>
.RootBox {
  height: 100%;
  background-color: #fff;
}
.iconlist {
  align-items: center;
}
.mbnav {
  background-color: #fff;
  .mbnavson {
    height: 51px;
    margin-left: 24px;
    line-height: 51px;
    border-bottom: 1px solid #4285f4;
  }

  .mobile {
    line-height: 21px;
    margin-right: 25px;
  }
  .el-button--mini {
    font-size: 16px;
  }
}
/deep/ .el-breadcrumb__separator[class*='icon'] {
  color: #4285f4;
}
/deep/.el-breadcrumb__inner {
  color: #4285f4 !important;
  font-size: 14px;
}
.tabbleList {
  height: 100%;
  background-color: #fff;

  display: flex;
}
/deep/.el-tree {
  height: 600px;
  overflow: auto;
  width: 354px;
}
/deep/ .el-tree-node__expand-icon {
  z-index: 2;
}
/deep/ .el-tree-node__label {
  z-index: 2;
}
/deep/.el-table__row {
  height: 45px;
}
/deep/.el-tree-node__content {
  height: 45px;
  // background-color: red;
}
/deep/.el-tree-node__content:nth-child(add) {
  background-color: red;
}
/deep/.fatheritemlistname > .el-table--scrollable-x .el-table__body-wrapper {
  overflow-x: hidden !important;
}
.itemlistname {
  width: 100%;
  height: 45px;
  position: relative;
  z-index: 2;
}
.fatheritemlistname {
  border-top: 1px solid #ccc !important;
  background-color: #fff !important;
  width: 354px !important;
  position: relative;
  display: flex;
  padding-top: 3.5px;
  padding-right: 20px;
}
.fatherform {
  width: 100%;
  padding-left: 20px;
  background-color: #fff !important;
}
/deep/ .el-table {
  z-index: 2;
}
/deep/.el-table__body {
  width: none !important;
}
/deep/ .el-table__header {
  width: none;
}
/deep/ .el-dialog__title {
  color: #4285f4;
}
/deep/ .el-dialog__header {
  border-bottom: 1px solid #4285f4;
}
/deep/ .el-dialog {
  width: 50%;
}
/deep/.el-breadcrumb__inner {
  color: #4285f4 !important;
  font-size: 14px;
}
/deep/.el-breadcrumb__inner.is-link {
  color: #4285f4 !important;
  font-size: 14px !important ;
}
.dialog-footer {
  text-align: center;
}
.dialog-footer {
  text-align: center;
}
/deep/.el-form {
  display: flex;
  flex-flow: wrap;
}
/deep/.el-form-item {
  width: 50%;
}
/deep/ .el-button--primary {
  margin-right: 50px;
}
.elinputlist {
  width: 214px;
  display: block;
}
/deep/.el-drawer__header {
  color: #4285f4 !important;

  margin: 0 15px 32px 25px;
  border-bottom: 1px solid #4285f4;
  padding: 20px;
}
/deep/ :focus {
  outline: 0;
}
//右键菜单样式开始
.tree_menu {
  position: fixed;
  display: block;
  z-index: 20000;
  background-color: #fff;
  padding: 5px 0;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

  /deep/ul {
    margin: 0;
    padding: 0;
  }
  ul li {
    list-style: none;
    margin: 0;

    font-size: 14px;
    line-height: 30px;
    cursor: pointer;
    .el-button {
      border: none;
      width: 100%;
      height: 38px;
      z-index: 2;
    }
    .el-button--mini {
      font-size: 14px;
    }
  }
  ul li:hover {
    background-color: #ebeef5;
  }
}
.custom-tree-node {
  font-size: 14px;
}
.hander {
  height: 40px;
  width: 100%;
  background-color: #fff;
  padding-left: 20px;
  line-height: 40px;
  .handerspan {
    line-height: 30px;
    font-size: 16px;
    color: #4285f4;
  }
}
.routeUrl {
  width: 100%;
  .elinputlist {
    width: 100%;
  }
}
</style>
